<template>
  <view class="detail_end-container">
    <image src="http://down.qwdata.vip/app_icon/1705842354331" mode="widthFix" class="bg"></image>
    <navbar :title="title" mode="transparent">
      <template v-slot:left>
        <image src="@/static/white_back.png" mode="widthFix" class="back" @click="toBack"></image>
      </template>
    </navbar>
    <view class="panel">
      <view class="zhengquelv_container">
        <view class="jindu_container_wapper">
          <view class="jindu_container">
            <view class="jindu_view1">
              <view class="jindu_red" :style="{transform:'rotate('+rotate+'deg)'}"></view>
              <view class="jindu_view2"></view>
            </view>
          </view>
          <text class="num">{{ jindu }}
            <text class="unit">%</text>
          </text>
        </view>
        <view class="tips">{{ tips }}</view>
      </view>
      <view class="ti-status-container">
        <view class="item">
          <text class="label">{{ timeStr }}</text>
          <text class="sub-label">本次练习时间</text>
        </view>
        <view class="item">
          <text class="label">{{ problemNum }}</text>
          <text class="sub-label">练习题数</text>
        </view>
        <view class="item">
          <text class="label">{{ errorNum }}</text>
          <text class="sub-label">本次错题</text>
        </view>
      </view>
      <view class="btn zhenshi flex-row align-center justify-between" @click="goDetail" v-if="kemu">
        <view class="flex-col left-container">
          <text class="title">查看本次错题</text>
          <text class="sub-title">本次共错误 {{ errorNum }} 道</text>
        </view>
        <image src="https://down.qwdata.vip/app_icon/shunxu_btn_tuijian.png" mode="widthFix"
               class="img-tuijian"/>
        <view class="inner-btn center">
          <text class="title">开始复习</text>
        </view>
      </view>
    </view>
    <TiyanDialog :bottom="true"></TiyanDialog>
    <ADInterstitial ref="ADInterstitial"></ADInterstitial>
  </view>
</template>

<script>
import navbar from '@/components/navbar'
import {mapGetters} from 'vuex'
import day from "@/vendor/day";
import ADInterstitial from "@/components/ADInterstitial.vue";
import TiyanDialog from "@/components/TiyanDialog.vue";

export default {
  components: {
    TiyanDialog,
    ADInterstitial,
    navbar
  },
  data() {
    return {
      title: '本次练题情况',
      type: null,
      kemu: '1',
      timeStr: null,
      problemNum: 0,//练习题数
      errorNum: 0,//本次错题
      jindu: '',
      tips: '',
      rotate: -180
    }
  },
  computed: {
    ...mapGetters(['mainProduct', 'isKemu1VIP', 'isKemu2VIP', 'isKemu3VIP', 'isKemu4VIP']),
    kemuVIP() {
      if (this.kemu == 1) {
        return this.isKemu1VIP
      }
      if (this.kemu == 2) {
        return this.isKemu2VIP
      }
      if (this.kemu == 3) {
        return this.isKemu3VIP
      }
      if (this.kemu == 4) {
        return this.isKemu4VIP
      }
    },
    ...mapGetters('question', ['kemu1', 'kemu4']),
    wrongTodayCount() {
      if (this.kemu === '1') {
        return this.kemu1.wrongTodayCount
      } else {
        return this.kemu4.wrongTodayCount
      }
    },
  },
  onLoad({type, time, problemNum, errorNum, kemu = '1'}) {
    this.timeStr = day().hour(0).minute(0).second(time).format('HH:mm:ss')
    this.type = type
    if (kemu === 'undefined') {
      this.kemu = null
    } else {
      this.kemu = kemu
    }
    this.problemNum = problemNum
    this.errorNum = errorNum
    this.jindu = Math.round((problemNum - errorNum) / problemNum * 100)
    if (this.jindu < 90) {
      this.tips = '很遗憾，正确率太低！'
    } else {
      this.tips = '恭喜你，正确率遥遥领先！'
    }

    this.$nextTick(() => {
      this.rotate = this.jindu / 100 * 180 - 180
      this.$refs.ADInterstitial.tryOpen()
    })
  },
  methods: {
    async goDetail() {
      if (this.kemuVIP) {
        uni.redirectTo({
          url: '/pages/detail/detail?title=今日错题&type=wrong&today=1&kemu=' + this.kemu
        })
      } else {
        uni.navigateTo({
          url: '/pages/vip/vip'
        })
      }
    },
    goJingxuan() {
      uni.redirectTo({
        url: '/pages/detail/detail?type=jingxuan&title=精选题库&kemu=' + this.kemu,
      });
    },
    toBack() {
      uni.navigateBack()
    },
  }
}
</script>

<style lang="scss">
page {
  background-color: #f2f8ff;
}

.detail_end-container {
  display: flex;
  flex-direction: column;
  position: relative;

  .bg {
    position: fixed;
    top: 0;
    width: 100%;
  }

  .top-bar {
    .back {
      width: 36upx;
      height: 36upx;
      align-self: center;
    }
  }

  .btn {
    height: 140upx;
    border-radius: 70upx;
    background-image: linear-gradient(90deg, #538DFF 0%, #3073F6 100%);
    color: #fff;

    &:last-child {
      margin-top: 30rpx;
    }

    &.zhenshi {
      background-image: linear-gradient(to right, rgb(42, 42, 42), rgb(25, 26, 31));
      position: relative;
      @keyframes tiao {
        0% {
          transform: translateY(-5px);
        }
        50% {
          transform: translateY(0);
        }
        100% {
          transform: translateY(-5px);
        }
      }

      .img-tuijian {
        position: absolute;
        right: 60rpx;
        top: -20rpx;
        width: 142upx;
        height: 48upx;
        animation: tiao 1000ms infinite;
      }

      .left-container {
        .title {
          color: rgb(246, 203, 177);
        }

        .sub-title {
          color: rgba(246, 203, 177, 0.85);
        }
      }

      .inner-btn {
        background-image: linear-gradient(to right, rgb(246, 203, 177), rgb(247, 228, 210));

        .title {
          color: rgb(42, 42, 42);
        }
      }
    }

    .left-container {
      margin-left: 60rpx;

      .title {
        font-weight: bold;
        font-size: 18px;
        color: #FFFFFF;
      }

      .sub-title {
        margin-top: 5rpx;
        opacity: 0.85;
        font-size: 14px;
        color: #FFFFFF;
      }
    }

    .inner-btn {
      min-width: 184upx;
      box-sizing: border-box;
      padding: 0 20rpx;
      height: 76upx;
      margin-right: 36upx;
      background-image: linear-gradient(to right, rgb(252, 252, 252), rgb(207, 235, 248));
      border-radius: 100rpx;

      .title {
        font-weight: bold;
        font-size: 32upx;
        color: #3073F6;
      }
    }
  }

  .panel {
    background-color: #fff;
    margin: 30upx;
    z-index: 1;
    padding: 30upx;
    border-radius: 20upx;
    display: flex;
    flex-direction: column;
    margin-top: 100rpx;

    .zhengquelv_container {
      margin-top: -70rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      .tips {
        margin-top: 40rpx;
        font-size: 18px;
      }

      .jindu_container_wapper {
        position: relative;

        .num {
          font-size: 36px;
          position: absolute;
          font-weight: bold;
          color: #FF5753;
          left: 0;
          right: 0;
          top: 80rpx;
          text-align: center;

          .unit {
            position: absolute;
            font-size: 20px;
            bottom: 10rpx;
          }
        }

        .jindu_container {
          background-color: #fff;
          width: 300rpx;
          height: 150rpx;
          border-top-right-radius: 200rpx;
          border-top-left-radius: 200rpx;
          overflow: hidden;

          .jindu_view1 {
            width: 280rpx;
            margin: 10rpx;
            height: 280rpx;
            background-color: #eee;
            border-radius: 200rpx;
            padding: 1px;
            position: relative;

            .jindu_red {
              position: absolute;
              left: 0;
              right: 0;
              background-color: #FF5753;
              width: 280rpx;
              height: 140rpx;
              border-top-right-radius: 200rpx;
              border-top-left-radius: 200rpx;
              transform: rotate(-180deg);
              transform-origin: center bottom;
              transition: 1000ms;
            }

            .jindu_view2 {
              width: 200rpx;
              margin: 40rpx;
              height: 200rpx;
              position: absolute;
              left: 0;
              right: 0;
              background-color: #fff;
              border-radius: 200rpx;
              font-weight: bold;
              text-align: center;
            }
          }
        }
      }
    }

    .ti-status-container {
      display: flex;
      margin-bottom: 50upx;
      margin-top: 60upx;

      .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
        align-items: center;
        border-right: 4upx dashed #e5e5e5;

        &:last-child {
          border: none;
        }

        .label {
          font-size: 46upx;
          font-weight: 500;
        }

        .sub-label {
          color: #666;
          margin-top: 10upx;
        }
      }
    }

    .btns_container {
      display: flex;

      .btn {
        height: 108upx;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 98upx;
        margin-bottom: 10rpx;
        border: 1px solid #3377F4;
        color: #3377F4;
        flex: 1;
        font-size: 16px;
        font-weight: bold;

        &:first-child {
          margin-right: 30rpx;
        }
      }
    }
  }
}
</style>
